<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="ui modal" id="info" th:fragment="info" th:if="${currUser}">
    <div class="header">编辑用户信息</div>
    <div class="content">
        <h3 th:text="${currUser.username}" id="username"/>
        <form class="ui form userinfo">
            <div class="field">
                <input type="password" th:field="${currUser.password}" placeholder="密码"/>
            </div>
            <div class="field">
                <input type="text" th:field="${currUser.motto}" placeholder="个性签名"/>
            </div>
            <div class="field">
                <input type="email" th:field="${currUser.email}" placeholder="邮箱"/>
            </div>
            <input type="submit" class="ui button" value="提交"/>
        </form>
    </div>
</div>
<script th:fragment="info">
    $(document).ready(function () {
        $("#userItem").click(function () {
            $("#info").modal('show');
        });

        $('.ui.form.userinfo').form({
            onSuccess: function () {
                var formData = {
                    username: $('#username').text(),
                    password: getFieldValue('password'),
                    motto: getFieldValue('motto'),
                    email:    getFieldValue('email')
                };

                $.ajax({
                    type: 'PUT',
                    url: '/user/info',
                    contentType: "application/json",
                    data: JSON.stringify(formData),
                    success: onFormSubmitted,
                    error: errormsg
                });
            }
        }).submit( function( e ) {
            e.preventDefault();
        });
        function getFieldValue(fieldId) {
            // 'get field' is part of Semantics form behavior API
            return $('.ui.form.userinfo').form('get field', fieldId).val();
        }
        function errormsg(err) {
            $('.ui.form.userinfo').form({
                onFailure : function (err, fields) {
                    console.log(err);
                    console.log(fields);
                }
            });
        }
        // Handle post response
        function onFormSubmitted(response) {
            if(response=='ok'){
               $("#info").modal('hide');
            }
            if(response=='302'){
                window.location.reload();
            }
        }
    })
</script>
</body>

</html>